<template>
  <div :class="currentClass">
    <div class="textPart">
      <p>
        {{ receivedData ? "欢迎登录图书管理系统" : "欢迎注册成为新用户" }}
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { ref, watchEffect } from "vue";

const props = defineProps({
  receivedData: Boolean,
});

const currentClass = ref("bg-one");
watchEffect(() => {
  if (props.receivedData) {
    currentClass.value = "bg-one";
  } else {
    currentClass.value = "bg-two";
  }
});
</script>

<style scoped>
.bg-one {
  background-image: url("@/assets/plant1.png");
  background-repeat: no-repeat;
  position: relative;
  height: 100vh;
}

.bg-two {
  background-image: url("@/assets/plant2.png");
  background-repeat: no-repeat;
  position: relative;
  height: 100vh;
}

.textPart {
  position: absolute;
  bottom: 10%;
  width: 70%;
  left: 15%;
  text-align: center;
  background-color: rgba(105, 105, 105, 0.5);
  color: white;
}
</style>